// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.notification-popup {
  background-color: @osu-colour-b4;
  color: @osu-colour-c1;
  padding: 10px @gutter-v2;

  @media @desktop {
    margin-top: 0;

    max-width: 400px;
    width: 90vw;
    padding: 15px 10px;

    border: 1px solid @osu-colour-b3;
    border-radius: @border-radius-large;
    .thick-box-shadow();
  }

  &__buttons {
    display: flex;
  }

  &__clear-button {
    margin-left: auto;
    display: inline-block;
  }

  &__scroll-container {
    display: grid;
    grid-gap: 10px;

    @media @desktop {
      -webkit-overflow-scrolling: touch;
      overflow: auto;
      // 30px is the parent's padding
      max-height: calc(var(--vh, 1vh) * 100 - (@nav2-height + 30px));
      padding: 0 5px;
    }
  }

  &__filters {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(2, 1fr);
  }

  &__filter {
    .reset-input();
    text-align: left;
    color: @osu-colour-l2;

    .link-hover({
      color: @osu-colour-c1;
    });

    &--active {
      color: @osu-colour-c1;
    }
  }

  &__filter-count {
    margin-right: 5px;
    padding: 2px 10px;
    font-size: smaller;
    color: @osu-colour-c2;
    background-color: @osu-colour-b2;
    border-radius: 10000px;
  }

  &__empty-with-more {
    margin-top: -5px; // negates show-more's margin-top and rebalance the main padding
  }

  &__empty {
    margin: 10px 0 5px; // balances the main padding
    white-space: nowrap;
  }

  &__item {
    & + & {
      margin-top: 10px;
    }
  }
}
